<template>
    <div class="base">
        <div class="main">
            <img class="erweima" src="../../assets/img/erweima.png" alt="">
            <div class="btnJump">
                <van-row>
                    <van-col span="7" class="btnJump-col" @click="jump(1)">红中麻将简介</van-col>
                    <van-col span="8" class="btnJump-col" style="margin: 0 .35rem;" @click="jump(2)">邀请赛规则</van-col>
                    <van-col span="7" class="btnJump-col" @click="jump(3)">门票及权益</van-col>
                </van-row>
            </div>
            <div class="title">
                <p>{{ sessions }}</p>
                <!--  <p v-show="operate_status == 0">{{ title ? title : "第19届花之林杯" }}</p> -->
                <!-- <input class="input" v-model="title" label="" placeholder="请输入第几届XX杯"
                    v-show="operate_status == 1" /> -->
            </div>
            <img src="../../assets/img/invitation.png" alt="" class="invitation-bg" :style="{'height':show ? '92vh' : '100vh'}">
            <div class="content">
                <div class="text">
                    <p v-show="operate_status == 0">{{ home }}</p>
                    <input class="input" v-model="home" label="" label-width="0" placeholder="请输入店名+祝福语"
                        v-show="operate_status == 1" />
                </div>
                <div class="address">
                    <p v-show="operate_status == 0">{{ adress }}</p>
                    <input class="input" v-model="adress" label="" label-width="0" placeholder="请输入地址"
                        v-show="operate_status == 1" />
                </div>
            </div>
        </div>
        <div class="btn-info" v-if="show">
            <van-button class="btn" size="large" :round="true" color="#1E9858" @click="editOperate">修改</van-button>
            <van-button class="btn" size="large" :round="true" color="#1E9858" @click="saveOperate">保存</van-button>
            <van-button class="btn" size="large" :round="true" color="#1E9858" @click="copy">邀请好友</van-button>
        </div>
    </div>
</template>

<script>
import { sumbitInvitation, getinvitation } from "@/api/fulfil.js";
import getUrldata from "@/utils/getUrl.js";

export default {
    name: 'invitation',
    data() {
        return {
            operate_status: 0,
            title_value: "",
            text_value: "",
            adress: "",
            title: "",
            home: "",
            sessions: '',
            type:'',
            show:true,
        };
    },
    activated() {
        this.getinvitation();
    },
    created() {
        let type = getUrldata('type');
        let agentid = getUrldata('agentid');
        let mid = getUrldata('mid');
        if(type){
            this.show = false;
            this.agentid = agentid;
            this.mid = mid;
        }else{
            this.agentid = localStorage.getItem("agentid");
            this.mid = localStorage.getItem("mid");
        }
    },
    mounted() {
    },
    methods: {
        jump(type) {
            if (type == 1) {
                this.$router.push({
                    path: '/mahjong/general/rules',
                })
            } else if (type == 2) {
                this.$router.push({
                    path: '/mahjong/introduction',
                })
            } else if (type == 3) {
                this.$router.push({
                    path: '/mahjong/ticket/benefits',
                })
            }

        },
        //邀请函内容获取
        getinvitation() {
            getinvitation({
                agentid: this.agentid,
                mid: this.mid,
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.sessions = res.data.data.sessions;
                        this.adress = res.data.data.adress;
                        this.home = res.data.data.home;
                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        editOperate() {
            this.operate_status = 1
            this.adress = ""
            this.home = ""
        },
        //保存
        saveOperate() {
            if (!this.adress) {
                this.$Toast("地址不能为空！");
            } else if (!this.home) {
                this.$Toast("祝福语不能为空！");
            } else {
                this.operate_status = 0
                sumbitInvitation({
                    agentid: localStorage.getItem("agentid"),
                    mid:  localStorage.getItem("mid"),
                    home: this.home,
                    adress: this.adress
                })
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.$Toast('保存邀请函成功！');
                        } else {
                            this.$Toast(res.data.msg);
                        }
                        console.log(res, 'res');

                    })
                    .catch((error) => {
                        this.changeShow = false;
                        console.log(error);
                    });
            }

        },
        copy() {
            var input = document.createElement("input");
            input.value = `https://www.tunquanquan.com/tqq/#/invitation?agentid=${this.agentid}&mid=${this.mid}&type=1`;
            document.body.appendChild(input);
            input.select();
            input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
            document.body.removeChild(input);
            this.$Toast("复制成功，请粘贴分享好友即可！");
        }
    },
};
</script>

<style lang="less" scoped>
.base {
    background-color: #6a0100;
    height: 100vh;
    color: #000;
    font-family: MicrosoftYaHei-Bold;

    .btnJump {
        position: absolute;
        left: 5%;
        bottom: .5rem;
        width: 90%;
        height: 1.2rem;

    }

    .btnJump-col {
        height: 1rem;
        color: red;
        background-color: #fff;
        border-radius: .1rem;
        text-align: center;
        line-height: 1rem;
        font-size: .35rem;
        font-weight: 600;
    }

    .main {
        position: relative;

        .erweima {
            width: 2.8rem;
            height: 2.8rem;
            position: absolute;
            bottom: 2.2375rem;
            left: .6rem;
            border-radius: .5rem;
        }

        .title {
            position: absolute;
            top: .4rem;
            left: 50%;
            transform: translateX(-50%);
            color: #E8AD1A;
            font-size: .7rem;
            font-weight: 700;
            line-height: 1.2;
            text-align: center;
            text-shadow: 0 .1rem .0625rem rgba(0, 0, 0, 0.3);
            background: linear-gradient(180deg, #fdf3b5 0%, #e19d61 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            white-space: nowrap;

            input {
                max-width: 80%;
                padding: .25rem .1rem;
                color: #fff;
                border: 2px solid #fff;
                border-radius: 10px;
                background-color: transparent;
                background: linear-gradient(180deg, #fff 0%, #fff 100%);
                -webkit-background-clip: text;
            }

            .input::placeholder {
                color: #fff !important;
                font-size: .7rem !important;
                text-align: center;
            }
        }

        .invitation-bg {
            width: 100%;
            height: 92vh;
        }

        .content {
            position: absolute;
            bottom: 2.5rem;
            right: 0;
            width: 55%;
            padding: 0 .2rem;

            .text {
                color: #fff;
                font-size: .5rem;
                font-weight: 700;
                line-height: 1.2;
                margin-bottom: .25rem;

                p {
                    min-height: .9rem;
                }

                input {
                    width: 80%;
                    height: .7rem;
                    padding: .1rem;
                    color: #fff;
                    font-weight: 400;
                    border: 2px solid #fff;
                    border-radius: 10px;
                    background-color: transparent;
                }

                .input::placeholder {
                    color: #fff !important;
                    font-size: .4rem !important;
                    text-align: center;
                }
            }

            .address {
                color: #fff;
                font-size: .325rem;
                font-weight: 400;
                line-height: 1.2;
                margin-bottom: .25rem;

                p {
                    min-height: .9rem;
                }

                input {
                    width: 80%;
                    height: .7rem;
                    padding: .1rem;
                    color: #fff;
                    border: 2px solid #fff;
                    border-radius: 10px;
                    background-color: transparent;
                }

                .input::placeholder {
                    color: #fff !important;
                    font-size: .325rem !important;
                    text-align: center;
                }
            }
        }
    }

    .btn-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: .2rem 0;

        .btn+.btn {
            margin-left: .375rem;
        }
    }
}
</style>